<!doctype html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>SeriousT • TodoMVC</title>
	<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
	<link rel="stylesheet" href="css/app.css">
</head>

<body>
	<section class="todoapp" ng-app="app" ng-controller="AppCtrl">

		<!-- ***************  顶部标题部分  ****************-->
		<header class="header">
			<h1>todos</h1>
			<form ng-submit="add()">
				<input ng-model="newTodo" class="new-todo" placeholder="What needs to be done?" ng-get-focus>
			</form>
		</header>
		<!--  ***************  内容部分  ********************  -->
		<section class="main">
			<input ng-change="all()" ng-model="selectAll" class="toggle-all" type="checkbox">
			<label for="toggle-all">Mark all as complete</label>
			<!-- 对闪现处理， 添加ng-cloak类名   在ng-class中添加自己的类  注意todo-list要写在''内 -->
			<ul class="ng-cloak" ng-class="{ 'todo-list':true}">
				<li ng-class="{editing : v.id===isEditingId, completed: v.completed}" ng-repeat="v in todos | filter:filterComp track by $index">
					<div class="view">
						<input ng-change="statusChange()" ng-model="v.completed" class="toggle" type="checkbox">
						<label ng-dblclick="edit(v.id)">{{ v.name }}</label>
						<button ng-click="remove(v.id)" class="destroy"></button>
					</div>
					<form ng-submit="save()">
						<input ng-blur="save()" auto-focus focus="{{ v.id===isEditingId }}" ng-model="v.name" class="edit">
					</form>
				</li>
			</ul>
		</section>
		<!-- ****************   过滤部分  *************** -->
		<footer class="footer">
			<span class="todo-count"><strong>{{ getActive() }}</strong> item left</span>
			<ul class="filters">
				<li>
					<a ng-class="{ selected:filterComp.completed===undefind }" href="#/">All</a>
				</li>
				<li>
					<a ng-class="{ selected:filterComp.completed===false }" href="#/active">Active</a>
				</li>
				<li>
					<a ng-class="{ selected:filterComp.completed===true }" href="#/completed">Completed</a>
				</li>
			</ul>
			<button ng-click="clear()" class="clear-completed">Clear completed</button>
		</footer>
	</section>


	<!-- ***************  底部信息   ****************** -->
	<footer class="info">
		<p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
		<p>Created by <a href="http://todomvc.com">SeriousT</a></p>
		<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
	</footer>

	<!-- ***************  JS  ************** -->
	<!-- 引入库 -->
	<script src="angular.js"></script>
	<script src="angular-route.min.js"></script>
	<!-- 添加依赖 -->
	<script src="js/service.js"></script>
	<script src="js/app.js"></script>
</body>

</html>
